.container{
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  height: 100%;
  position: fixed;
  background: #f7f7f7
}
.month_income_head{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 350rpx;
  background: #f9832b;
  padding: 30rpx;
}
.month_block{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.month_block_icon{
  width: 28rpx;
  height: 28rpx;
  margin-right: 14rpx;
}
.month_block_data{
  font-size: 26rpx;
  color: #fff;
  margin-right: 8rpx;
}
.month_block_right_icon{
  width: 30rpx;
  height: 24rpx;
}
.income_block{
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  margin-top: 40rpx;
}
.income_block_title{
  font-size: 28rpx;
  margin-bottom: 6rpx;
}
.income_data{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 80rpx;
}
.line{
  width: 100rpx;
  background: #fc9f52;
  height: 4rpx;
  border-radius: 4rpx;
  margin-top: 4rpx;
}
.month_income_info{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 30rpx;
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  top: 300rpx;
}
.month_chart_block{
  width: 100%;
  background: #fff;
  border-radius: 20rpx;
  height: 600rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 30rpx;
  box-shadow: 2rpx 4rpx 12rpx #ccc;
}
.month_chart_title{
  font-size: 30rpx;
  margin-top: 10rpx;
}
.month_chart_type{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 30rpx;
}
.month_chart_type_item{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
}
.month_chart_type_item:last-child{
    margin-right: 0rpx;
}
.month_chart_type_item_img{
    width: 46rpx;
    height: 24rpx;
    border-radius: 4rpx;
    margin-right: 10rpx;
}
.month_chart_type_item_text{
    font-size: 22rpx;
    color: #666;
}
.month_chart_list{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 60rpx;
}
.month_chart_item{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100rpx;
}
.bar_chart_block{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  height: 200rpx;
}
.bar_chart_figure_item{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 200rpx;
  position: relative
}
.bar_chart_text{
  color: #999;
  position: absolute;
  font-size: 18rpx;
  z-index: 2
}
.bar_chart_highly{
  background: #f27839;
  width: 40rpx;
}
.month_time_block{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-size: 24rpx;
  color: #666
}
.month_time_line{
  width: 100%;
  border: 2rpx solid #999;
  border-radius: 4rpx;
  background: #999;
}
.dot{
  height: 6rpx;
  border: 2rpx solid #999;
  margin-bottom: 20rpx;
  border-radius: 4rpx;
  background: #999;
}
.spending{
    width: 100%;
    margin-top: 30rpx;
    color: #666;
    font-size: 26rpx;
}
.bottom_line{
  width: 100%;
  border: 2rpx solid #eee;
  margin-top: 100rpx
}
.column_list{
  margin-top: 530rpx;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.column_item{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  box-sizing: border-box;
}
.column_item_icon{
  width: 30rpx;
  height: 30rpx;
}